<template>
  <div>
    <Header></Header>
    <transition name="el-fade-in-linear">
      <div class="mblog">
        <div class="mblog-title">
          <h2>{{blog.title}}</h2>
          <div v-if="hasLogin">
            <router-link class="mblog-a" :to="{name:'BlogEdit',params:{blogId:blog.id}}">
              <el-link icon="el-icon-edit">编辑</el-link>
            </router-link>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm title="确认删除当前文章吗？" @onConfirm="deleteBlog(blog.id)">
              <el-link icon="el-icon-delete" slot="reference">删除</el-link>
            </el-popconfirm>
          </div>
        </div>

        <el-divider></el-divider>
        <div class="markdown-body" v-html="blog.content"></div>
      </div>
    </transition>
  </div>
</template>
<script>
import Header from "../components/Header";
import "github-markdown-css";
export default {
  components: { Header },
  name: "BlogDetail",
  data() {
    return {
      blog: {
        id: "",
        userId: "",
        title: "",
        content: ""
      },
      hasLogin: false
    };
  },
  methods: {
    deleteBlog(bolgId) {
      const _this = this;
      this.$axios
        .post("/blog/del/" + bolgId, null, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          _this.$alert("操作成功", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              _this.$router.push("/blogs");
            }
          });
        });
    }
  },
  created() {
    const _this = this;
    const blogId = this.$route.params.blogId;
    this.$axios.get("/blog/" + blogId).then(res => {
      const blog = res.data.data;
      _this.blog.id = blog.id;
      _this.blog.userId = blog.userId;
      _this.blog.title = blog.title;
      let MardownIt = require("markdown-it");
      let md = new MardownIt();
      _this.blog.content = md.render(blog.content);
      if (_this.$store.getters.getUser&&blog.userId == _this.$store.getters.getUser.id) {
        this.hasLogin = true;
      }
    });
  }
};
</script>
<style scoped>
.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem;
  width: 100%;
  min-height: 70rem;
  padding: 1rem 0.8rem;
}
.mblog-title {
  text-align: center;
}
.mblog-a {
  text-decoration: none !important;
}
</style>